<template>
  <div class="box">
    <h1>社团成员发展情况</h1>
    <div class="chart" ref="rightBottomChartMain"></div>
    <div class="container">
      <AutoScrollTable :columns="columns" :data="tableData" :scrollSpeed="15" :pauseOnHover="true" height="13rem" />
    </div>
  </div>
</template>

<script setup lang="ts">
import AutoScrollTable from './AutoScrollTable.vue';
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getRightBottomData, getRightBottomMainData } from '@/api/data-screen/right-charts';

onMounted(() => {
  getChartData()
})

let tableData = ref([])

// 获取图表展示所需数据
function getChartData() {
  getRightBottomData().then(result => {
    processChartData(result.data)
  });


  getRightBottomMainData().then(result => {
    const tableData1 = result.data.map((item, index) => {
      return {
        id: index + 1,                 // 自增序号
        name: item.name,
        college: item.college,
        award: item.award,           // 转换后的立功信息
        time: item.enlistmentTime       // 直接映射入伍时间
      };
    });
    tableData.value = tableData1
  })
}

// 格式化获取到的数据并初始化图表
function processChartData(rawData) {
  // 1. 转换雷达图数据
  const radarData = rawData.map(item => ({
    name: item.year,  // 年份作为name
    value: [
      item.enlistment,   // 总入伍数
      item.clubMembers,  // 社团成员入伍数
      item.award,        // 立功受奖人数
      item.retention     // 留队人数
    ]
  }));

  // 2. 提取年份列表
  const yearList = rawData.map(item => item.year);

  // 输出结果示例
  console.log("雷达图数据:", radarData);
  console.log("年份列表:", yearList);
  initRightBottomChart(radarData, yearList)
}

// 获取根元素字体大小
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);

// 定义一个函数，将 rem 转换为像素值
function remToPx(rem) {
  return rem * rootFontSize;
}

//右下图
const rightBottomChartMain = ref<HTMLElement | null>(null);
// 初始化

function initRightBottomChart(radarData, yearList) {
  if (!rightBottomChartMain.value) return;
  const myChart = echarts.init(rightBottomChartMain.value);
  const option = {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '10%',
      top: '10%',
      containLabel: true
    },
    color: ['#00FFFF', '#DC143C', '#FFEA48', '#6AFF00',],
    // 图例配置改为数组形式（定义两个图例）
    legend: [
      // 左侧图例（前两个年份）
      {
        data: yearList.slice(1, 3), // 取前两个年份
        orient: 'vertical',         // 垂直排列
        left: '5%',                // 左侧定位
        top: '55%',                // 纵向居中
        textStyle: {
          color: '#fff',
          fontSize: '1rem'
        },
        itemGap: remToPx(1.25),              // 图例项间距
        itemWidth: remToPx(1.7),            // 图例标记宽度
        itemHeight: remToPx(0.9)            // 图例标记高度
      },
      // 右侧图例（后两个年份）
      {
        data: yearList.slice(3, 5),   // 取后两个年份
        orient: 'vertical',
        right: '5%',              // 右侧定位
        top: '55%',
        textStyle: {
          color: '#fff',
          fontSize: '1rem'
        },
        itemGap: remToPx(1.25),              // 图例项间距
        itemWidth: remToPx(1.7),            // 图例标记宽度
        itemHeight: remToPx(0.9)
      }
    ],


    radar: { // 雷达图坐标系配置
      splitArea: { // 分割区域样式
        areaStyle: {
          color: ['#B0C4DE'], // 环形颜色带
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10,
          opacity: 1 // 透明度
        }
      },
      radius: "80%",  // 雷达图半径（相对容器）
      splitNumber: 1,   // 分割环数
      axisLine: {
        /* 坐标轴线配置 */
        // show: false
      },
      axisLabel: { // 显示并调整刻度标签
        show: true,
        fontSize: '0.875rem',
        color: 'red',

      },

      axisTick: {
        show: true,

      },
      axisName: {
        fontWeight: "bold",
        fontSize: '0.9rem',
      },
      indicator: [
        { name: '总入伍数', min: 100, max: 130, color: '#36ffdf' },
        { name: '社团成员入伍数', min: 60, max: 90, color: '#36ffdf' },
        { name: '立功受奖数', min: 40, max: 80, color: "#36ffdf" },

        { name: '留队人数', min: 10, max: 50, color: "#36ffdf" },
        // { name: '总入伍数', max: 1000, color: '#36ffdf' },
        // { name: '社团成员入伍数', max: 1000, color: '#36ffdf' },
        // { name: '立功受奖数', max: 1000, color: "#36ffdf" },
        // { name: '留队人数', max: 1000, color: "#36ffdf" },
      ],
    },
    series: [
      {
        name: '人数',
        type: 'radar',
        data: [
          {
            lineStyle: {
              width: remToPx(0.12)
            },
            // value: radarData[4].value,
            // name: radarData[4].name,
            value: [126, 85, 79, 44],
            name: '2022',
            label: {
              show: true,
              position: "insideRight",
              fontWeight: "bolder",
              color: '#fff',
              fontStyle: "oblique",
            },
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.5,  // 渐变中心点 x 坐标（相对坐标系，范围 0~1）
                0.5, // 渐变中心点 y 坐标（相对坐标系，范围 0~1）
                1, // 渐变半径（1 表示覆盖整个雷达图区域）
                [  // 颜色渐变断点
                  {
                    color: '#e1f687', // 起始颜色（中心点）
                    offset: 0
                  },
                  {
                    color: '#00FFFF',  // 结束颜色（边缘）
                    offset: 0.6
                  },


                ])
            }
          },
          {
            lineStyle: {
              width: remToPx(0.12)
            },
            // value: radarData[3].value,
            // name: radarData[3].name,
            value: [119, 75, 54, 30],
            name: '2021',
            label: {
              show: true,
              position: "insideRight",
              fontWeight: "bolder",
              color: 'black',
              fontStyle: "oblique",

            },
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.5,  // 渐变中心点 x 坐标（相对坐标系，范围 0~1）
                0.5, // 渐变中心点 y 坐标（相对坐标系，范围 0~1）
                1, // 渐变半径（1 表示覆盖整个雷达图区域）
                [  // 颜色渐变断点
                  {
                    color: 'rgba(106, 255, 0, 1)', // 起始颜色（中心点）
                    offset: 0
                  },
                  {
                    color: '#DC143C',  // 结束颜色（边缘）
                    offset: 0.3
                  }
                ])
            }
          },
          {
            lineStyle: {
              width: remToPx(0.12)
            },
            // value: radarData[2].value,
            // name: radarData[2].name,
            value: [121, 71, 44, 14],
            name: '2020',
            label: {
              show: false,
              position: "insideRight",
              fontWeight: "bolder",
              color: 'blue',
              fontStyle: "oblique",
            },
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.5,  // 渐变中心点 x 坐标（相对坐标系，范围 0~1）
                0.5, // 渐变中心点 y 坐标（相对坐标系，范围 0~1）
                1, // 渐变半径（1 表示覆盖整个雷达图区域）
                [  // 颜色渐变断点
                  {
                    color: 'rgba(106, 255, 0, 1)', // 起始颜色（中心点）
                    offset: 0
                  },
                  {
                    color: '#FFEA48',  // 结束颜色（边缘）
                    offset: 0.25
                  }
                ])
            }
          },
          {
            lineStyle: {
              width: remToPx(0.12),
            },
            // 每年四个维度的人数
            // value: radarData[1].value,
            // name: radarData[1].name,
            value: [109, 61, 40, 11],
            name: '2019',
            label: {
              show: false,
              position: "inside",
              fontWeight: "bolder",
              fontStyle: "oblique",
              color: '#262c38',
            },
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.5,  // 渐变中心点 x 坐标（相对坐标系，范围 0~1）
                0.5, // 渐变中心点 y 坐标（相对坐标系，范围 0~1）
                1, // 渐变半径（1 表示覆盖整个雷达图区域）
                [  // 颜色渐变断点
                  {
                    color: '#e1f687', // 起始颜色（中心点）
                    offset: 0
                  },
                  {
                    color: '#6AFF00',  // 结束颜色（边缘）
                    offset: 0.1
                  }
                ])
            }
          },
        ]
      }
    ]
  };
  myChart.setOption(option);
}

const columns = [
  { key: 'id', title: '序号', width: '2rem' },
  { key: 'name', title: '姓名', width: '7rem' },
  { key: 'college', title: '学院', width: '7rem' },
  { key: 'time', title: '入伍时间', width: '7rem' },
  { key: 'award', title: '立功受奖' },
];


</script>

<style scoped>
.chart {
  margin-top: 0.15rem;
  height: 50%;
  width: 100%;
}

.container {
  margin-top: 0.12rem;
  justify-self: center;
  width: 90%;
}

.box {
  width: 100%;
  height: 100%;
}

h1 {
  text-align: center;
  color: aliceblue;
  margin: 0;
  margin-top: 1rem;
  padding: 0;
}
</style>
